<!DOCTYPE html>
{% load static %}
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Lyon'blog</title>
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/cl-css.css' %}" rel="stylesheet">
    <link href="{% static 'font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'highlight/styles/railscasts.css' %}">
</head>
<body>
<div class="cl-header container-fluid">
    <div class="header-content container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="/">
                <img src="{% static 'img/SS.png' %}" width="144" height="72" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="/">首页 <span class="sr-only">(current)</span></a>
                    </li>
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" href="#">教程</a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" href="#">模板</a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" href="#">日记</a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" href="#">关于</a>-->
<!--                    </li>-->
                </ul>
            </div>
        </nav>
    </div>
</div>

<div class="cl-cantainer container">
    <div class="row">
        <div class="col-md-9 cl-left">

<!--            <div class="recommend-index">-->
<!--                <div class="recommend-top">-->

<!--&lt;!&ndash;                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">&ndash;&gt;-->
<!--&lt;!&ndash;                        <ol class="carousel-indicators">&ndash;&gt;-->
<!--&lt;!&ndash;                            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>&ndash;&gt;-->
<!--&lt;!&ndash;                            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>&ndash;&gt;-->
<!--&lt;!&ndash;                            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>&ndash;&gt;-->
<!--&lt;!&ndash;                        </ol>&ndash;&gt;-->
<!--&lt;!&ndash;                        <div class="carousel-inner">&ndash;&gt;-->
<!--&lt;!&ndash;                            &ndash;&gt;-->
<!--&lt;!&ndash;                            <div class="carousel-item active">&ndash;&gt;-->
<!--&lt;!&ndash;                                <img class="d-block w-100" src="media/{{ dict_art.1 }}" alt="First slide">&ndash;&gt;-->
<!--&lt;!&ndash;                            </div>&ndash;&gt;-->
<!--&lt;!&ndash;                            <div class="carousel-item">&ndash;&gt;-->
<!--&lt;!&ndash;                                <img class="d-block w-100" src="media/{{ dict_art.2 }}" alt="Second slide">&ndash;&gt;-->
<!--&lt;!&ndash;                            </div>&ndash;&gt;-->
<!--&lt;!&ndash;                            <div class="carousel-item">&ndash;&gt;-->
<!--&lt;!&ndash;                                <img class="d-block w-100" src="media/{{ dict_art.3 }}" alt="Third slide">&ndash;&gt;-->
<!--&lt;!&ndash;                            </div>&ndash;&gt;-->

<!--&lt;!&ndash;                        </div>&ndash;&gt;-->

<!--&lt;!&ndash;                        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="sr-only">Previous</span>&ndash;&gt;-->
<!--&lt;!&ndash;                        </a>&ndash;&gt;-->
<!--&lt;!&ndash;                        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="carousel-control-next-icon" aria-hidden="true"></span>&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="sr-only">Next</span>&ndash;&gt;-->
<!--&lt;!&ndash;                        </a>&ndash;&gt;-->
<!--&lt;!&ndash;                    </div>&ndash;&gt;-->


<!--                </div>-->
<!--&lt;!&ndash;                <div class="recommend-bottom">&ndash;&gt;-->
<!--&lt;!&ndash;                    <div class="recommend-item">&ndash;&gt;-->
<!--&lt;!&ndash;                        <a href="details"><img src="{% static 'temporary-img/recommended-left.jpg' %}" class="img-fluid" alt=""></a>&ndash;&gt;-->
<!--&lt;!&ndash;                    </div>&ndash;&gt;-->
<!--&lt;!&ndash;                    <div class="recommend-item">&ndash;&gt;-->
<!--&lt;!&ndash;                        <a href="details"><img src="{% static 'temporary-img/recommended-right.jpg' %}" class="img-fluid" alt=""></a>&ndash;&gt;-->
<!--&lt;!&ndash;                    </div>&ndash;&gt;-->
<!--&lt;!&ndash;                </div>&ndash;&gt;-->

<!--            </div>-->
            {% for item in page %}
            <div class="cl-card">
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-12 cl-card-image"><a href="details/{{ item.id }}"><img src="/media/{{ item.picture }}" class="img-fluid" alt=""></a></div>
                    <div class="col-lg-9 col-md-8 col-sm-12 cl-card-main">
                        <h3 class="cl-card-main-title"><a href="details/{{ item.id }}">{{ item.title }}</a></h3>
                        <p class="cl-card-main-info">{{ item.referral }}</p>
                        <p class="cl-card-more"><a href="details/{{ item.id }}">阅读更多...</a></p>
                    </div>
                </div>
            </div>
            {% endfor %}


            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-center">
<!--                    <li class="page-item disabled">-->
<!--                    判断是否有上一页-->
                        {% if page.has_previous %}
                        <a class="page-link" href="/{{ page.previous_page_number }}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">Previous</span>
                        </a>
                        {% endif %}
<!--                    </li>-->
                    {% for num in page.paginator.page_range%}
                    <li class="page-item active"><a class="page-link" href="{{ num }}">{{ num }}</a></li>
<!--                    <li class="page-item"><a class="page-link" href="pages/{{ show_list.paginator.numpages|add:1 }}">{{ show_list.number|add:1 }}</a></li>-->
<!--                    <li class="page-item"><a class="page-link" href="pages/{{ show_list.paginator.numpages|add:2 }}">{{ show_list.number|add:2 }}</a></li>-->
                    {% endfor %}
<!--                    判断是否有下一页-->
                    {% if page.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="{{ page.next_page_number }}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">Next</span>
                        </a>
                    </li>
                    {% endif %}

                </ul>
            </nav>

        </div>
        <div class="col-md-3 cl-right">
            <div class="right-card">

                <div class="right-card-main">
                    <div class="right-card-title">qq群—在考虑建不建</div>
                    <div class="cl-code">
<!--                        <img src="{% static 'temporary-img/code.jpg' %}" class="img-fluid" alt="">-->
                        <p>啦啦啦</p>
                    </div>

                </div>
            </div>

            <div class="right-card">

                <div class="right-card-main">
                    <div class="right-card-title">最新文章</div>
<!--                    <div class="right-recommended"><a href="#"><img src="{% static 'temporary-img/list-right.jpg' %}" class="img-fluid" alt=""></a></div>-->
                    <ul class="right-recommended-list">
                        {% for item in page %}
                        <li><a href="details/{{ item.id }}"><i class="fa fa-angle-right" aria-hidden="true"></i>{{ item.title }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>

<!--            <div class="right-card">-->

<!--                <div class="right-card-main">-->
<!--                    <div class="right-card-title">热门标签</div>-->
<!--                    <ul class="label">-->
<!--                        <li><a href="#">JPress</a></li>-->
<!--                        <li><a href="#">平面设计</a></li>-->
<!--                        <li><a href="#">网页设计</a></li>-->
<!--                        <li><a href="#">皮肤</a></li>-->
<!--                        <li><a href="#">主题</a></li>-->
<!--                        <li><a href="#">模板</a></li>-->
<!--                        <li><a href="#">APP设计</a></li>-->
<!--                        <li><a href="#">企业网站</a></li>-->
<!--                        <li><a href="#">博客主题</a></li>-->
<!--                        <li><a href="#">设计规则</a></li>-->
<!--                        <li><a href="#">UI设计</a></li>-->
<!--                        <li><a href="#">界面设计</a></li>-->
<!--                        <li><a href="#">icon</a></li>-->
<!--                        <li><a href="#">UI</a></li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--            </div>-->

        </div>
    </div>

</div>

<div class="container-fluid cl-footer">
    <div class="container">
        <p class="cl-copyright" href="http://beian.miit.gov.cn/" >渝ICP备20009882号-1</p>
        <p class="cl-copyright">暂时准备留作日记和blog</p>
    </div>
</div>
<script src="{% static 'jquery/jquery.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'highlight/highlight.pack.js' %}"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>